<template>
  <div>
    <div class="comments">
    <h4>评论</h4>
    <span class="Eitel" v-if="follow">回复 @{{nickname}} <i class="el-tag__close el-icon-close" @click="hidden"></i></span>
    <el-input v-model="content" placeholder="说点什么吧..." ref="input"></el-input>
    <el-row type="flex" justify="space-between" class="upload">
      <el-upload
      :action="$axios.defaults.baseURL + '/upload'"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
      name="files"
      :file-list="pics">
      <i class="el-icon-plus"></i>
      </el-upload>
       <el-button type="primary" @click="submit">提交</el-button>
    </el-row>
    <commentsList :dataList="newComments" @revert="revert"/>
    
  </div>
  <div class="fengye">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[3, 5, 15, 25]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      prev-text="上一页"
      next-text="下一页">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import commentsList from '@/components/post/commentsList';
export default {
  components:{
    commentsList
  },
  data(){
    return {
      content: "",
      // 缓存列表
      commentsList:[],
      pics:[],
      pageIndex:1,
      pageSize:3,
      total:0,
      // 新的评论列表
      newComments:[],
      // 回复id
      follow:null,
      nickname:""



    }
  },
  mounted(){
    this.getComments();
    
  },
  methods:{
    
    // 回复评论，id和用户昵称
    revert(id,nickname){
      // 回复id
      this.follow = id;
      // 用户昵称
      this.nickname = nickname
      this.$refs.input.focus()
      console.log(this.$refs.input);
      
     

    },
    // 点击隐藏回复
    hidden(){
      // 清空回复id
      this.follow = null

    },
    // 提交评论
    submit(){
      // setTimeout(()=>{
        this.$axios({
        url:'/comments',
        method:"post",
        headers:{
          // Bearer属于jwt的token标准
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        },
        data:{
          post: this.$route.query.id,
          content: this.content,
          pics: this.pics,
          follow: this.follow

        }
      }).then(res=>{
        const {message} = res.data;
        if(message === '提交成功'){
          this.$message({
          message,
          type: 'success'
        });
        this.pics=[];
        this.content=""
        this.getComments();
        this.follow = null
        }
        console.log(res);
        
      })
      // },1)
    },
    // 删除图片
     handleRemove(file, fileList) {
       this.pics = fileList
        console.log(fileList);
      },
      handlePictureCardPreview(file) {
        // console.log(file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadSuccess(res){
        this.pics.push(
          {id:res[0].id,url: this.$axios.defaults.baseURL + res[0].url}
        )
        console.log(this.pics)

      },
      // 获取评论的方法
      getComments(){
        this.$axios({
            url: "/posts/comments",
            params:{
                post: this.$route.query.id
            }
        }).then(res=>{
            const {data} = res.data
            data.forEach(element => {
          const index =element.account.defaultAvatar.indexOf('http')
          if(index === -1){
            element.account.defaultAvatar = this.$axios.defaults.baseURL + element.account.defaultAvatar
          }
          // 缓存评论列表
          this.commentsList = data;
          // 评论总条数
          this.total = this.commentsList.length;

          this.newComments = this.commentsList.slice(this.pageIndex - 1,this.pageIndex*this.pageSize)
            // console.log(res);
            
        })
        })
      },
      // 分页条数
      handleSizeChange(val){
        //  console.log(`每页 ${val} 条`);
         this.pageSize = val;
         this.pageIndex = 1;
         this.newComments = this.commentsList.slice(this.pageIndex-1,this.pageIndex*val)

      },
      // 分页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.newComments = this.commentsList.slice((val-1)*this.pageSize,val*this.pageSize)
      }
  }

}
</script>

<style lang="less" scoped>
.comments{
  // padding-bottom: 20px;
  h4{
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 15px;
  }
  .Eitel{
    // display: block;
    font-size: 14px;
    padding: 5px 10px;
    color: #b0a7a2;
    background: #f4f4f5;
    line-height: 32px;
    border-radius: 5px;
    margin: 20px 0 10px;
    i{
      padding-left: 5px;
    }

  }
  /deep/ .el-input__inner{
    height: 53px;

  }
  .upload{
    padding-top: 10px;
    /deep/ .el-button{
      width: 56px;
      height: 28px;
      // text-align: center;
      padding: 0;
    }
  }
  
}
.fengye{
    padding: 10px 0 20px;
    
  }


</style>